<template>
	<view class="main">
		<u-toast ref="uToast" :z-index="99999"></u-toast>
		<u-action-sheet :actions="optionList" :show="optionShow" closeOnClickOverlay @close="optionShow = false"
			@select="selectClick"></u-action-sheet>
		<u-modal :show="deleteShow" title="提示" showCancelButton @cancel="deleteShow = false"
			@confirm="getuserAddressDelete">
			<view class="slot-content center">是否删除该地址</view>
		</u-modal>
		<!-- 批量删除 -->
		<u-modal :show="batchDeleteShow" title="提示" showCancelButton @cancel="batchDeleteShow = false"
			@confirm="immBatchDel">
			<view class="slot-content center">是否删除该地址</view>
		</u-modal>
		<view class="header_search">
			<u-input placeholder="搜索" v-model="addrKeywrod"  prefixIcon="search" shape="circle" fontSize="24rpx" customStyle="border:0;">
				<template slot="suffix">
					<u-button type="success"size="mini"class="search_btn" @click="searchAddr">搜索</u-button>
				</template>
			</u-input>
		</view>
		<u-radio-group placement="column" @change="groupChange">
		<view class=" box_redius address " style="padding-bottom: 40rpx;" v-for="item in cityList" :key="item.id"
			@click="confirmSelect(item)">
			<view class="top flex flex_bet flex_align">
				<view class="top_left">
						 <u-radio v-if="item.is_default == 0" :name="item.id" label="设为默认地址" labelSize="10" size="10"></u-radio>
						 <text v-else>已经设置为默认地址</text>
				</view>
				<view class="top_right">
					<u-icon name="edit-pen" size="20"  v-if="!isDel" @tap.stop="goEditAddress(item.id)"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="fot flex flex_bet">
				<view class="fot_left" :style="item.tag==1?'background:#ff8d38;':item.tag==2?'background:#3494ec;':item.tag==3?'background:#c17cde;':'background:#ff8d38;' ">
					<text>{{item.tag ? item.tag == 1 ?'家': item.tag == 2? '公': item.tag == 3 ? '学':  item.name[0] : item.name[0]}}</text>
				</view>
				<view class="fot_main">
					<view class="main_info mar_bottom">
						{{item.name}} {{item.phone}}
					</view>
					<view class="main_address">
						{{item.addr}}
					</view>
				</view>
				<view class="fot_right" v-if="!isDel">
					<view class="copy" @click.stop="copy(item.name+item.phone+item.addr)">
						<text class="iconfont icon-fuzhi"></text>
						复制
					</view>
					<view class="del" @click.stop="del(item.id)">
						<text class="iconfont icon-shanchu"></text>
						删除
					</view>
				</view>
				<view class="fot_right" v-if="isDel">
					<u-checkbox-group >
						<u-checkbox shape="circle" activeColor="#e24c45" @change="checkboxGroupChange($event,item.id)"></u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		</u-radio-group>
		<view v-if="!isDel" class="footer flex flex_align">
			<u-button type="primary" :plain="true" shape="circle" text="批量删除" customStyle="width:25%;margin-left:40rpx;" @click="batchDel"></u-button>
			<u-button type="primary" shape="circle" @click="goNewAddress" text="新增地址" customStyle="width:60%;margin-right:40rpx;"></u-button>
		</view>
		
		<view v-else class="footer flex flex_align">
			<u-button type="info" :plain="true" shape="circle" text="取消" @click="cancelDel" customStyle="width:25%;margin-left:40rpx;"></u-button>
			<u-button type="error" shape="circle" :text="'立即删除'+'('+total+')'" customStyle="width:60%;margin-right:40rpx;" @click="batchDeleteShow=true"></u-button>
		</view>
	<!-- 	<view class="flex flex_bet flex_align box_redius address" v-for="item in cityList" :key="item,id"
			@click="confirmSelect(item)">
			<view class="city">{{item.addr}}</view>
			
			<view class="footer flex flex_align">
				<u-button type="primary" :plain="true" shape="circle" text="批量删除" customStyle="width:25%;margin-left:40rpx;"></u-button>
				<u-button type="primary" shape="circle" @click="goNewAddress" text="新增地址" customStyle="width:60%;margin-right:40rpx;"></u-button>
			</view>
			<view class="edit_btn" @click.stop="setClick(item.id)">
				<u-button type="primary" shape="circle" text="管理" size="mini">
				</u-button>
			</view>
		</view> -->
		<!-- <view class="mar_top mar_bottom">
			<u-button text="添加地址" shape="circle" type="primary" @click="cityShow = true"></u-button>
		</view> -->

		<!-- 添加弹窗 -->
		<u-modal :show="cityShow" title="添加" showCancelButton @confirm="modalConfirm" @cancel="cityShow = false" :z-index="600">
			<view class="slot-content">
				<u-form labelPosition="left" :model="addForm" ref="form1">
					<u-form-item label="姓名" prop="name" ref="item1" labelWidth="50">
						<u-input v-model="addForm.name" placeholder="请输入姓名"></u-input>
					</u-form-item>
					<u-form-item label="手机号" prop="phone" ref="item1" labelWidth="50">
						<u-input v-model="addForm.phone" placeholder="请输入手机号"></u-input>
					</u-form-item>
					<u-form-item label="地址" prop="addr" ref="item1" labelWidth="50">
						<u--textarea v-model="addForm.addr" placeholder="请输入地址"></u--textarea>
					</u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		userAddressList,
		userAddressAdd,
		userAddressById,
		userAddressEdit,
		userAddressDelete,
		userDefaultAddressEdit,
		userAddressBatchDelete
	} from '@/api/address.js'
	export default {
		data() {
			return {
				cityList: [],
				addForm: {
					name: '',
					phone: '',
					addr: ''
				},
				cityShow: false,
				id: 0,
				// optionShow: false,
				// optionList: [{
				// 	name: '编辑',
				// 	fontSize: '12'
				// }, {
				// 	name: '删除',
				// 	fontSize: '12'
				// }],
				deleteShow: false,
				selectAddress: '',
				isDel:false,
				total:0,
				addrKeywrod:'',//搜索值
				batchDelList:[],
				batchDeleteShow:false
			}
		},
		watch: {
			cityShow(val) {
				if (!val) {
					this.getuserAddressList()
					this.addForm = this.$options.data().addForm
					this.id = 0
				}
			},
			deleteShow(val) {
				if (!val) {
					this.getuserAddressList()
					this.id = 0
				}
			},
			addrKeywrod(val){
				if(!val){
					this.getuserAddressList()
					this.id = 0
				}
			}
		},
		onLoad(options) {
			console.log(options,'这是我的地址');
			if (options.selectAddress) {
				this.selectAddress = options.selectAddress
			}
		},
		onShow() {
			this.getuserAddressList()
		},
		methods: {
			//批量删除
			batchDel(){
				this.isDel=true
			},
			//多选删除
			immBatchDel(){
				if(!this.batchDelList) return this.$refs.uToast({
					message:'未选中删除项!',
					type:'error',
					icon:false
				})
				let list = this.batchDelList.toString()
				userAddressBatchDelete({
					ids:list
				}).then(res=>{
					this.getuserAddressList()
					this.$refs.uToast.show({
						message:'删除成功！',
						icon:false,
						type:'success'
					})
				})
				this.total = 0
				this.batchDelList = []
				this.batchDeleteShow = false
				this.isDel=false
			},
			//计算选中的总数
			checkboxGroupChange(flag,id){
				console.log(flag,id);
				if(flag){
					this.batchDelList.push(id)
					this.total++
				}else{
					this.batchDelList=this.batchDelList.filter((item)=>{
						if(item !== id) return item
					})
					this.total--
				}
			},
			//取消删除
			cancelDel(){
				this.isDel = false
				this.total = 0
			},
			//选择寄回点
			confirmSelect(item) {
				console.log(this.selectAddress);
				let that = this
				if (this.selectAddress === 'confirm') {
					uni.navigateBack({
						delta: 1,
						success: function() {
							uni.setStorageSync('sendId', item.id);
							that.$store.commit('editUserAddressId', item)
							that.$store.commit('editAddress', item)
						}
					});
				}
			},
			//默认地址
			groupChange(n){
				console.log('groupChange', n);
				userDefaultAddressEdit({
					id:n,
					is_default:1
				}).then(res=>{
					this.getuserAddressList()
					this.$refs.uToast.show({
						message:'设置成功！',
						type:'success',
						icon:false
					})
				})
					// uni.setStorageSync('sendId', n)
			},
			
			//删除地址的方法
			del(id){
				this.id = id
				this.deleteShow = true
			},
			setClick(id) {
				this.id = id
				this.optionShow = true
				console.log(id);
			},
			selectClick(item) {
				if (item.name === '编辑') {
					this.getuserAddressById(this.id)
				} else {
					this.deleteShow = true
				}
			},
			//id获取信息
			getuserAddressById(id) {
				userAddressById({
					id: id
				}).then(res => {
					this.addForm = res.data
					this.cityShow = true
				})
			},
			//编辑地址信息
			getuserAddressEdit() {
				userAddressEdit(this.addForm).then(res => {
					this.$refs.uToast.show({
						message: '修改成功',
						icon: false,
						type: 'success'
					})
					this.cityShow = false
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//获取我的地址列表
			// getuserAddressList() {
			// 	userAddressList().then(res => {
			// 		// console.log(res.data,'index');
			// 		let addressList = res.data
			// 		const defAddress = addressList.filter(item=>{
			// 			return item.is_default == 1 ? item:item[0]
			// 		})
			// 		if(defAddress[0]){
			// 			console.log(defAddress[0],'默认地址');
			// 			this.$store.commit('editUserAddressId', defAddress[0])
			// 			uni.setStorageSync('sendId', defAddress[0].id)
			// 		}else{
			// 			this.$store.commit('editUserAddressId', addressList[0])
			// 		}
			// 	})
			// },
			getuserAddressList() {
				userAddressList().then(res => {
					this.cityList = res.data
					// console.log(res.data);
					// this.$store.commit('editUserAddressId', res.data[0])
					// uni.setStorageSync('sendId', res.data[0].id)
				}).catch(err => {
					this.$store.commit('editUserAddressId', {
						name: '',
						phone: '',
						addr: ''
					})
					this.cityList = []
				})
			},
			//复制
			copy(item) {
				let that = this
				if (!item) return that.$u.toast('暂无信息');
				uni.setClipboardData({
					data: item,
					success(res) {
						that.$u.toast('复制成功')
					}
				})
			},
			modalConfirm() {
				console.log('-----', this.id)
				const phoneZz = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
				if (!phoneZz.test(this.addForm.phone)){
					this.cityShow = false
					return this.$refs.uToast.show({
						message: '请输入正确的手机号码',
						type: 'error',
						icon: false
					})
				}
				if (this.id === 0) {
					this.getuserAddressAdd()
				} else {
					this.getuserAddressEdit()
				}
			},
			//跳转添加地址页面
			goNewAddress(){
				uni.navigateTo({
					url:'./component/newAddress'
				})
			},
			//跳转编辑地址
			goEditAddress(id){
				// if(this.selectAddress) return this.$refs.uToast.show({
				// 	message:'请不要在选择时编辑地址！',
				// 	icon:false
				// })
				uni.navigateTo({
					url:'./component/editAddress?id='+id
				})
			},
			//添加我的地址
			getuserAddressAdd() {
				userAddressAdd(this.addForm).then(res => {
					this.$refs.uToast.show({
						message: '添加成功',
						icon: false,
						type: 'success'
					})
					this.cityShow = false
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//刪除地址
			getuserAddressDelete() {
				userAddressDelete({
					id: this.id
				}).then(res => {
					this.$refs.uToast.show({
						message: '删除成功',
						icon: false,
						type: 'success'
					})
					this.deleteShow = false
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//搜索
			searchAddr(){
				if(this.addrKeywrod=="") return this.getuserAddressList()
				this.cityList = this.cityList.filter(item=>{
					return item.addr.includes(this.addrKeywrod)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		margin: 0;
		padding-bottom: 250rpx;
	}
	.edit_btn {
		width: 20%;
	}

	.city {
		flex: 1;
	}
	.header_search{
		background: #fff;
		padding: 20rpx;
		/deep/.u-input{
			broder:none;
			background: #f1f2f4;
			padding: 4px !important;
			/deep/ .u-icon__icon{
				color: #dddddd;
			}
		}
		/deep/ .u-button{
			font-size: 13px;
			border-radius: 50px;
			width: none;
			color: #5994d5;
			background: #fff;
			border: 0;
			box-shadow: 0 0 5px 1px #ddd;
		}
	}
	.address {
		// +.address {
			margin-top: 20rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		// }
		.line{
			width: 100%;
			height: 1px;
			background: #f1f2f4;
			margin: 20rpx 0;
		}
	}
	
	.fot{
		.fot_left{
			height: 60rpx;
			width: 60rpx;
			line-height: 60rpx;
			background: #fe8b39;
			border-radius: 50%;
			text-align: center;
			text{
				color: #fff;
				font-size: 26rpx;
			}
		}
		.fot_main{
			padding: 10rpx;
			width: 75%;
			.main_info{
				color: #000;
				font-size: 28rpx;
				font-weight: 700;
			}
		}
		.fot_right{
			padding: 10rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			font-size: 22rpx;
			text{
				font-size: 24rpx;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		background: #fff;
		box-shadow: 0 -1px 5px 3px #ddd;
	}
</style>
